import  React,{PureComponent} from 'react';
import {connect} from 'dva';
import {
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Icon,
    Button,
    Dropdown,
    Menu,
    InputNumber,
    DatePicker,
    Modal,
    message
} from  'antd';
 import  GoodsCategoryTable from '../../../components/goods/goodsCategory';
 import  GoodsCategoryEdit from '../../../components/goods/goodsCategory/GoodsCategoryEdit'
 import  PageHeaderLayout from '../../../layouts/PageHeaderLayout';


import  styles from  './TestGoodsCategory.less';
import object from "../../../common/constants";

const  FormItem = Form.Item;
const  {Option} = Select;
const  getValue = obj => object.keys(obj).map(key => obj[key]).join(',');

@connect(state => ({
    rule: state.TestGoodsCategory,

}))
@Form()
export default class TestGoodsCategory extends PureComponent {

    state = {
        modalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
        record: {},
        editType: 'add'
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch({
            type: 'goodCategory/fetch',
        });
    }

    handleGoodsCategoryTableChange = (pagination, filtersArg, sorter) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const filters = object.keys(filtersArg).reduce((obj, key) => {
            const newObj = {...obj};
            newObj[key] = getValue(FiltersArg[key]);
            return newObj;
        }, {});

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        if (sorter.field) {
            params.sorter = '${sorter.field}_${sorter.order}';
        }
        dispatch({
            type: 'goodsCategory/fetch',
            payload: params,

        });

    };
    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type: 'goodsCategory/fetch',
            payload: {},

        });

    }
    hangdleMenuClick = (e) => {
        const {dispatch} = this.props;
        const {selectedRows} = this.state;
        if ('selectedRows')
            return;
        switch (e.key) {
            case 'remove':
                dispatch({
                    type: 'goodsCategory/remove',
                    payload: {
                        no: selectedRows.map(row => row.no).join(','),
                    },
                    callback: () => {
                        this.setState({
                            selectedRows: [],
                        });

                    },
                });
                break;
            default:
                break;
        }
    }

    handleSelectRows = (rows) => {

        this.setState({
            selectedRows:rows,
        });
    }
    handleSearch = (e) => {
        e.preventDefault();

        const {dispatch,form} = this.props;

        form.noValidateFields((err,fieldsValue) => {
            if(err)
                return;
            const values = {
                ...fieldsValue,
                updatedAt: fieldsValue.updatedAt &&fieldsValue.updatedAt.valueOf(),
            };
            this.setState({
                formValues:values,
            });
            dispatch({
                type : 'goodsCategory/fetch',
                payload:values,
            });
        });
    }
    handleModalVisible = (flag) =>{
        this.setState({
            modalVisible: !!flag,
        });
    }

    handleModalSuccess = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
        }
        dispatch({
            type:'goodsCategory/fetch',
            payload: values,
        });
    }
    handleDelCategoryRow = (catId,pagination) =>{
        const {dispatch} = this.props;
        dispatch({
            type:'goodsCategory/del',
            payload :{cat_id:catId},
            callback: (response) => {
                if (response.result === 0) {
                    message.success('删除成功');
                    this.handleModalSuccess(pagination);
                } else {
                    message.success('删除失败');
                }
            }
        });
    }
    handleAddCategory = () => {
       this.handleModalVisible(true);
       this.setState({
           editType:'add',
       });
    }
    handleEditCategoryRow = (record,pagination) => {
        this.handleModalVisible(true);
        this,setState({
            editType:'mod',
            record:record
        });
    }

    renderSimpleForm(){
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md:8,lg:24,xl:48}} >
                    <Col md={8} sm={24} >
                        <FormItem label="分类名称" >
                            {getFieldDecorator('no')(
                                <Input placeholder="请输入"  />
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem laber="使用状态">
                            {getFieldDecorator('status')(
                                <Select placeholder="请选择" style={{width:'100%'}}>
                                    <Option value="">请选择</Option>
                                    <Option value="0">不在用</Option>
                                    <Option value="1">在用</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <span className={styles.sumbitButtons}>
                            <button type="primary" htmlType="submit">查询</button>
                            <button style={{marginLeft:8}} ONCLICK={this.handleFormReset}>重置</button>
                        </span>
                    </Col>
                </Row>
            </Form>
        );
        }

        renderForm(){
        return this.renderSimpleForm();
        }

        render() {
        }


}

















